<template>
  <div class="home">
    <!-- 轮播图 -->
    <swiper ref="mySwiper" :options="swiperOptions">
      <swiper-slide>
        <img class="w-100" src="../assets/images/banner2.jpeg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/banner3.jpeg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/banner4.jpeg" alt="" />
      </swiper-slide>
      <div
        class="swiper-pagination text-right px-3 pb-1"
        slot="pagination"
      ></div>
    </swiper>

    <!-- 图标导航 -->
    <div class="nav-icons bg-white mt-3 text-center pt-3 text-grey-1">
      <!-- 图标 -->
      <div class=" d-flex flex-wrap">
        <div class="nav-item mb-3">
          <i class="sprite sprite-news"></i>
          <div class="py-2">爆料站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-story"></i>
          <div class="py-2">故事站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-shop"></i>
          <div class="py-2">周边商城</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-test"></i>
          <div class="py-2">体验服</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-person"></i>
          <div class="py-2">新人专区</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-book"></i>
          <div class="py-2">荣耀·传承</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-cos"></i>
          <div class="py-2">同人社区</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-king"></i>
          <div class="py-2">王者营地</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-wechat"></i>
          <div class="py-2">公众号</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-version"></i>
          <div class="py-2">版本介绍</div>
        </div>
      </div>
      <!-- 显示更多 -->
      <div class="bg-light pt-1 pb-2 fs-sm d-flex jc-center ai-center">
        <i class="sprite sprite-up mr-1"></i>
        <span>收起</span>
      </div>
    </div>

    <!-- 新闻资讯 -->
    <my-list-card title="新闻资讯" icon="Menu" :categories="newsCats">
      <template #items="{category}">
        <router-link
          tag="div"
          :to="`/article/${item._id}`"
          class="py-2 fs-lg d-flex"
          v-for="(item, i) in category.newsList"
          :key="i"
        >
          <span class="text-info">[{{ item.categoryName }}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{
            item.title
          }}</span>
          <span class="text-grey-1 fs-sm">{{ item.createdAt | date }}</span>
        </router-link>
      </template>
    </my-list-card>

    <!-- 英雄列表 -->
    <my-list-card title="英雄列表" icon="card-hero" :categories="heroCats">
      <template #banner>
        <img class="w-100 mb-3" src="../assets/images/banner1.jpg" />
      </template>
      <template #items="{category}">
        <div class="d-flex flex-wrap" style="margin:0 -0.5rem">
          <router-link
            tag="div"
            :to="`/hero/${hero._id}`"
            class="p-2 text-center"
            style="width:20%"
            v-for="(hero, i) in category.heroList"
            :key="i"
          >
            <img :src="hero.avatar" class="w-100" />
            <div>{{ hero.name }}</div>
          </router-link>
        </div>
      </template>
    </my-list-card>

    <!-- 精彩视频 -->
    <my-card title="精彩视频" icon="vedio"></my-card>
  </div>
</template>

<script>
import dayjs from "dayjs";
export default {
  filters: {
    date(val) {
      return dayjs(val).format("MM/DD");
    },
  },
  data() {
    return {
      // 轮播图
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        loop: true,
      },
      // 新闻列表
      newsCats: [],
      // 英雄列表
      heroCats: [],
    };
  },
  mounted() {
    this.fetchNewsCats();
    this.fetchHeroCats();
  },
  methods: {
    //新闻列表
    fetchNewsCats() {
      this.$http.get("news/list").then((res) => {
        this.newsCats = res.data;
      });
    },
    //英雄列表
    fetchHeroCats() {
      this.$http.get("heroes/list").then((res) => {
        this.heroCats = res.data;
      });
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/_variables.scss";
.home {
  // 轮播图
  .swiper-pagination {
    .swiper-pagination-bullet {
      opacity: 1;
      border-radius: 0.1538rem;
      background-color: #fff;
      &.swiper-pagination-bullet-active {
        background-color: map-get($map: $colors, $key: "info");
      }
    }
  }

  // 图标导航
  .nav-icons {
    border-top: 1px solid $border-color;
    border-bottom: 1px solid $border-color;
    .nav-item {
      width: 25%;
      border-right: 1px solid $border-color;
      &:nth-child(4n) {
        border-right: none;
      }
    }
  }
}
</style>
